<template>
    <view class="container">
        <view
            class="list-item"
            v-for="(item, index) in noticeList"
            :key="index"
        >
            <view class="notice-info" @click="$u.route({
                url: item.url,
                params: item.params
            })">
                <u-image
                    :src="item.icon"
                    shape="circle"
                    width="64rpx"
                    height="64rpx"
                ></u-image>
                <view class="info">
                    <view class="info-top">
                        <u-text
                            :text="item.title"
                            size="28rpx"
                            color="#000000"
                            block
                            :lines="1"
                        ></u-text>
                        <u-text
                            :text="item.timeAt"
                            size="28rpx"
                            color="#888888"
                            block
                            align="right"
                        ></u-text>
                    </view>
                    <u-text
                        :text="item.description"
                        size="28rpx"
                        color="#888888"
                        block
                    ></u-text>
                </view>
            </view>
        </view>
        <u-loadmore
            height="50rpx"
            :status="loadStatus"
            v-if="total > 0"
            marginTop="20rpx"
            marginBottom="20rpx"
            fontSize="32rpx"
            iconSize="34rpx"
            line
        />
    </view>
</template>
<script>
import { getNoticePage } from "@/config/api"
export default {
    data() {
        return {
            query: {
                page: 1,
                list_rows: 10
            },
            noticeList: [],
            total: 0
        }
    },
    onLoad() {
        this.$store.dispatch("user/setUserNotice")
        this.getData()
    },
    computed: {
        loadStatus() {
            if (this.total > this.noticeList.length) {
                return "loading"
            } else {
                return "nomore"
            }
        }
    },
    onReachBottom() {
        if (this.total > this.noticeList.length) {
            this.query.page += 1
            this.getData(true)
        }
    },
    methods: {
        async getData(more = false) {
            const res = await getNoticePage(this.query)
            if (more) {
                this.noticeList = [...this.noticeList, ...res.items]
            } else {
                this.noticeList = res.items
            }
            this.total = res.total
        }
    }
}
</script>
<style lang="scss" scoped>
    page {
        background: #F8F8F8;
    }
    .container {
        box-sizing: border-box;
        padding-top: 10rpx;
        padding-bottom: 1rpx;
        .list-item {
            padding: 0 20rpx;
            margin-top: 30rpx;
            .notice-info {
                background: #ffffff;
                display: flex;
                padding: 34rpx 20rpx;
                .info {
                    flex: auto;
                    margin-left: 24rpx;
                    .info-top {
                        margin-bottom: 20rpx;
                        display: flex;
                        justify-content: space-between;
                    }
                }
            }
        }
    }
</style>
